<template>
	<view class="cashaprize">
		<uni-nav-bar :fixed="true" status-bar :border="false" left-icon="left" title="核销奖品" @clickLeft="back" />
		<view class="zhong_box">

			<!-- <view class="scbtn f28">
        收藏兑换券
      </view> -->
			<view class="drawname fw mt_50">{{ item.draw_name }}</view>
			<view class="c_000 f30 textcenter mb_5">兑奖期限</view>
			<view class="c_000 f30 textcenter">{{item.task_draw.startime}} 至 {{ item.task_draw.endtime }}</view>
			<view class="linestyle"></view>
			<view class="flexcolumn aligncenter djbox" v-if="item.is_cash">
				<div class="img">
					<image :src="prizeSrc"></image>
				</div>
				<view class="bnt" @click="lkdjfn" v-if="item.is_cash==1">立即兑奖</view>
				<view class="code_box" v-if="item.is_cash==2">
					<view class="code_bt textcenter f32 mb_10">兑奖码</view>
					<view class="code_text">{{ item.code }}</view>
				</view>

				<view class="qrcode" v-if="item.is_cash==2">
					<!-- <qrcode :text="qrCodeText" :size="200" :foreground="foreground" :background="background">
					</qrcode> -->
					<w-qrcode :options="options" ref="qrcode"></w-qrcode>
				</view>
			</view>
			<!---is_cash 2上门取件  1邮寄 task_draw.address-->
			<!---type 1虚拟卡券  2实物奖励  3多抽x次  5现金红包-->
			<view class="linestyle"></view>
			<view class="djbox" v-if="item.is_cash==2&item.type!=1">
				<view class="textcenter f32 c_000">活动介绍</view>
				<view class="mt_10 f28" v-html="huodongjc"></view>

			</view>
			<view class="djbox" v-else>
				<view class="textcenter f32 c_000">兑奖说明</view>
				<view class="mt_10 f28" v-if="item.cash_msg" v-html="item.cash_msg"></view>
				<view v-else class="f28 textcenter mt_10 c_696969 ">暂无详情</view>
			</view>
			<template v-if="item.is_cash==2&item.type==2">
				<view class="linestyle"></view>
				<view class="djbox">
					<view class="textcenter f32 c_000">兑奖地址</view>
					<view class="mt_10 f28 tac" v-if="item.task_draw.address">{{ item.task_draw.address}}</view>
					<view v-else class="f28 textcenter mt_10 c_696969 ">暂无地址</view>
				</view>
			</template>

		</view>
	</view>
</template>
<script>
	//import QRCode from 'qrcodejs2'  is_cash 1邮寄 2上门取件  type 2实物 1虚拟卡券 
	//import qrcode from "uniapp-qrcode"

	export default {
		data() {
			return {
				options: {
					code: '',
					size: 200, // 二维码大小
				},
				qrCodeText: "",
				prizeSrc: "",
				foreground: '#000000',
				background: '#ffffff',
				qrcodeData: "",
				item: null,
				huodongjc: "",

				time_Interval: '', // 定时器
				time_Interval_time: 60000, // 定时器时间
				index: null,
			};

		},

		components: {

		},
		onLoad(query) {
			console.log("query", query)
			this.item = JSON.parse(query.obj)
			this.prizeSrc = uni.imgPath + "/" + this.item.photo
			this.index = query.index
			// 定时刷新二维码
			console.log("item", this.item)
			console.log("index", this.index)
			let res = JSON.parse(uni.getStorageSync('taskInfo', 'session'));
			console.log("res", res)
			this.huodongjc = res.task.introduce;
			const that = this
			if (!this.time_Interval) {
				if (this.item.is_cash == 2) {
					that.init()
				}
			}
			this.time_Interval = setInterval(function() {
				if (this.item.is_cash == 2) {
					that.init()
				}
			}, that.time_Interval_time)
			//	this.generateQRCode('https://www.example.com'); // 传入你要生成二维码的字符串
		},
		// 离开页面前清除定时器
		beforeRouteLeave(to, from, next) {
			clearInterval(this.time_Interval)
			next()
		},
		beforeDestroy() {
			clearInterval(this.time_Interval)
		},
		methods: {

			back() {
				uni.navigateBack()
			},
			// 到收货地址
			lkdjfn() {
				let id = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task.id;
				let url = "/pagesPrize/aboutPrize/address?obj=" + JSON.stringify(this.item) +
					"&index=" +
					this.index + '&id=' + id;
				uni.navigateTo({
					url
				})

			},
			x_fn() {
				let id = JSON.parse(uni.getStorageSync('taskInfo', 'session')).task.id;
				this.$router.push("/information?id=" + id);
			},
			// 二维码生成
			init() {
				const that = this
				let res = uni.getSystemInfoSync();
				let screenWidth = res.windowWidth;


				const width = screenWidth / 100 * 40 // 此行代码表示二维码的宽度为屏幕宽度的40%，width 不支持百分比、不同设备的像素不一样所以此处这样写
				// 此处可以根据业务进行异步处理，动态获取二维码参数，刷新二维码


				const {
					code,
					task_id
				} = this.item || {};
				const text = JSON.stringify({
					code,
					task_id
				}); // 兑换码、任务id
				console.log("text", text)
				this.options.code = text;
				// this.qrcode = new QRCode(this.$refs.qrcode, {
				// 	text, //二维码内容字符串
				// 	width: width, //图像宽度
				// 	height: width, //图像高度
				// 	colorDark: '#000000', //二维码前景色
				// 	colorLight: '#ffffff', //二维码背景色
				// 	correctLevel: QRCode.CorrectLevel.H, //容错级别
				// })
			}
		},
	};
</script>
<style lang="scss">
	.cashaprize {
		min-height: 100vh;
		background-color: rgba(234, 242, 251, 0.37);
		padding: 0 40rpx;
		padding-top: 40rpx;
		padding-bottom: 20rpx;

		.qrcode {

			// border: 1px solid #ddd;
			margin: 0 auto;
			margin-top: 20rpx;
			// margin-bottom:10vw ;
		}

		.zhong_box {
			background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
			;
			box-shadow: 0px 3px 22px 1px rgba(1, 60, 170, 0.16);
			border-radius: 22rpx;
			margin-top: 30rpx;
			// margin-bottom: 20rpx;
			padding: 30rpx;

			.scbtn {
				border: 1px solid #707070;
				padding: 7rpx 20rpx;
				border-radius: 6rpx;
				color: #000;
				width: 200rpx;
				text-align: center;
			}

			.drawname {
				font-size: 60rpx;
				color: #D83724;
				text-align: center;
				margin-bottom: 28rpx;
			}

			.code_box {
				.code_bt {
					text-align: center;
				}

				.code_text {
					color: #D83724;
					text-align: center;
				}
			}

			.text2 {
				text-align: center;
				font-size: 32rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #888888;
				margin-top: 15rpx;
			}

			// .shang {
			//   padding: 15rpx;
			//   position: relative;
			//   border-bottom: 2px solid #bbbbbb;
			//   .x_img {
			//     position: absolute;
			//     width: 40rpx;
			//     height: 40rpx;
			//     right: 20rpx;
			//     top: 20rpx;
			//   }
			//   .text1 {
			//     font-size: 40rpx;
			//     font-family: PingFang SC-Medium, PingFang SC;
			//     font-weight: 500;
			//     color: #333333;
			//     text-align: center;
			//     padding: 20px 0;
			//     margin-top: 15rpx;
			//   }
			//   .text2 {
			//     font-size: 28rpx;
			//     font-family: PingFang SC-Medium, PingFang SC;
			//     font-weight: 500;
			//     color: #7ebcff;
			//     text-align: center;
			//     padding: 6px 0;
			//   }
			// }
		}
	}

	.linestyle {
		width: 100%;
		height: 1rpx;
		border-bottom: 1px dashed #707070;
	}

	.djbox {
		margin-top: 10rpx;
		margin-bottom: 20rpx;

		.img {
			text-align: center;
			width: 100%;
			margin: 20rpx 0 30rpx 0;

			image {
				max-width: 260rpx;
				max-height: 260rpx;
			}
		}

		.bnt {
			background: linear-gradient(142deg, #EFB565 0%, #D83626 100%);
			border-radius: 44rpx;
			color: #ffffff;
			font-size: 32rpx;
			padding: 11rpx 58rpx;
			margin-top: 10rpx;
		}
	}

	.tac {
		text-align: center;
	}
</style>